<template>
	<div class="periodWrapper" @mouseup="downEnter=false">
		<ul class="hours clearfix mb40" >
            <li class="all" :class="{'allselected':allBtnSeleted}">
                <span class="btnInfo">时间段</span>
                <a href="javascript:;"  class="allBtn" id="mx_n_133">{{ btnText }}</a>
            </li>
            <li v-for="item in hour" @mousedown="down(item)" @mouseup="downEnter=false"  @mousemove="move(item)" v-if="item<24"  class="one hour milestone" :class="{'selected':checkHour.includes(item)}"  :value="item" id="mx_n_96" >
                <div class="hourInner" id="mx_n_95" mx-ei="on,click">
                    <span class="hourInnerTop"></span>
                </div>
                <div class="curLineStart" style="z-index: 10;" :class="{'block':borderline.includes(item)}" >
                    <span class="lineArrow"></span>
                    <span class="lineInfo">{{ item }}</span>
                </div>
                <div class="curLineEnd" style="z-index: 10;" :class="{'block':borderline.includes(item+1)}">
                    <span class="lineArrow"></span>
                    <span class="lineInfo">{{ item+1 }}</span>
                </div>
                <div class="hourLine">
                    <span class="hourInfo" id="mx_n_134" >{{ item }}</span>
                </div>
            </li>
            <li class="hour milestone hourLast">
                <span class="hourLine" mx-ei="on,mousedown">
                    <span class="hourInfo" >24</span>
                </span>
            </li>
		</ul>
	</div>
</template>
<style src="./style.css" scoped lang="less"></style>
<script src="./script.js"></script>